<template>
	<view class="margin-top-sm">
		<view>
			<view class="padding-lg padding-right-sm padding-bottom bg-white">
				<view class="flex">
					<view class="avatar">
						<image :src="profile.user.avatar" mode="widthFix"></image>
					</view>
					<view class="flex flex-direction flex-sub justify-center">
						<view class="flex justify-around">
							<view class="flex flex-direction align-center">
								<view class="text-bold text-black">{{profile.fansNum}}</view>
								<view class="text-sm text-grey">粉丝</view>
							</view>
							<view class="flex flex-direction align-center">
								<view class="text-bold text-black">{{profile.followersNum}}</view>
								<view class="text-sm text-grey">关注</view>
							</view>
							<view class="flex flex-direction align-center">
								<view class="text-bold text-black">Lv.10</view>
								<view class="text-sm text-grey">等级</view>
							</view>
						</view>
						<view v-if="!id || user.id===id" class="flex align-center justify-center edit" @click="toEditProfile">
							<view class="text-sm">编辑信息</view>
						</view>
					</view>
				</view>
				<view class="padding-lr padding-top text-grey text-sm">
					<view>个性签名: {{ profile.user || profile.user.bio || String(profile.user.bio).length> 0 ? profile.user.bio : '未填写' }}</view>
				</view>
			</view>

			<view class="margin-top-sm">
				<tabs :type="tabsList" v-model="tabActive"></tabs>
			</view>

      <view>
        <view v-for="post in posts">
          <view class="margin">

            <view v-if="post.type==='article'">
              <view class="bg-white padding-lr padding-tb-sm solid-bottom text-sm text-grey flex align-center justify-between">
                <view>
                  <text class="text-blue">{{ profile.user.username }}</text>
                  发布了这篇文章
                </view>
                <view>{{String(post.article.published_at).substring(0,10)}}</view>
              </view>
              <indexArticleCard :article="post.article"></indexArticleCard>
            </view>

            <view v-if="post.type==='zanArticle'">
              <view class="bg-white padding-lr padding-tb-sm solid-bottom text-sm text-grey flex align-center justify-between">
                  <view>
                    <text class="text-blue">{{ profile.user.username }}</text>点赞了这篇文章
                  </view>
                  <view>{{String(post.zanArticle.published_at).substring(0,10)}}</view>
              </view>
              <indexArticleCard :article="post.zanArticle.formatArticle" :showDianzan="false"></indexArticleCard>
            </view>

            <view v-if="post.type==='zanComment'">
              <zanComment :record="post.zanComment" :target="profile.user" :showDianzan="false"></zanComment>
            </view>

            <view v-if="post.type==='collection'">
              <view class="flex align-center bg-white padding">
                <view class="margin-right-sm">
                  <image :src="post.collection.author.avatar" mode="widthFix" style="width:80upx"></image>
                </view>
                <view>
                  <view>
                    <text class="text-blue padding-right-sm" @click="toUserCenter(post.collection.author.id)">{{post.collection.author.username}}</text>
                    收藏了文章
                    <text class="text-blue padding-left-sm" @click="toArticle(post.collection.article.id)">{{String(post.collection.article.title).substring(0,10)}}</text>
                  </view>
                  <view class="text-sm text-grey">{{String(post.collection.published_at).substring(0,10)}}</view>
                </view>
              </view>
            </view>


          </view>
        </view>

        <view v-if="!posts.length">
          <view class="margin-top" style="height:300upx">
            <empty-content></empty-content>
          </view>
        </view>

      </view>


		</view>
	</view>
</template>

<script>
  import { mapGetters } from 'vuex';
	import EmptyContent from "../../components/emptyContent/emptyContent";
  export default {
    components: {EmptyContent},
    onLoad(options){
      this.id = options?.id
    },
    data() {
			return {
        id:null,
				tabsList: [
          {title: "动态"},
					{title: "文章"},
					{title: "点赞"},
					{title: "收藏"},
				],
        profile:{},
        posts:[],
				tabActive: 0,
			}
		},
		onShow() {
      this.getProfile()
		},
    computed: {
      ...mapGetters({
        user: 'user/getUserinfo'
      }),
    },
    watch:{
      tabActive(val, oldVal){
        switch (val){
          case 0:
            this.posts = this.profile.socialPosts;
            break;
          case 1:
            this.posts = this.profile.socialPosts.filter(item =>item.type==="article")
            break;
          case 2:
            this.posts = this.profile.socialPosts.filter(item =>item.type.startsWith('zan'))
            break;
          case 3:
            this.posts = this.profile.socialPosts.filter(item =>item.type==="collection")
            break;
        }
      }
    },
		methods: {
      toArticle(id) {
        uni.navigateTo({
          url: '../article/article?id=' + id,
        })
      },
      toUserCenter(id) {
        uni.navigateTo({
          url: "../person/center?id=" + id,
        })
      },
      toEditProfile(){
        uni.navigateTo({
          url: './edit'
        })
      },
      getProfile(){
        this.$api.getProfile(this.id?this.id:this.user.id).then(res =>{
          console.log(res)
          this.profile = res
          this.posts= this.profile.socialPosts
        }).then(()=>{
          uni.setNavigationBarTitle({
            title: this.profile.user.username
          })
        })
      }
    }
	}
</script>

<style lang="scss">
	.avatar {
		width: 150upx;

		image {
			border-radius: 500upx;
		}

	}

	.edit {
		border: 1 upx solid #e1e1e1;
		border-radius: 10upx;
		height: 50upx;
		margin: 30upx 50upx 0upx 50upx;
	}
</style>
